<template>
    <van-popup v-model="search" position="top">
        <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @search="searchConfirmHandle"
            @cancel="searchCancelHandle"
        ><svg-icon slot="left-icon" icon-class="search" /></van-search>
        <!-- 列表 -->
        <div class="md-list_wrap">
            <template v-for="item in list">
                <div @click="searchListConfirmHandle(item)" class="md-list_item">{{item.projectName}}</div>
            </template>
        </div>
    </van-popup>
</template>

<script>
    import {Search,Popup} from 'vant';
    import {projectSearch} from '@/request/checkIn';
    
    export default {
        //认证
        name: 'authentication',
        
        data(){
            return {
                //搜搜内容
                value:'',
                search:true,
                list:[]
            }
        },
        methods:{
            // 搜索确认 - 隐藏
            searchConfirmHandle(){
                // 不传递项目参数
                this.$router.push({
                    path:'/checkIn'
                });
            },
            // 搜索取消 - 隐藏
            searchCancelHandle(){
                // 不传递项目参数
                this.$router.push({
                    path:'/checkIn'
                });
            },
            // 列表项确认
            searchListConfirmHandle(query){
                // 不传递项目参数
                this.$router.push({
                    path:'/checkIn',
                    query:query
                });
            },
            // 请求项目列表
            projectSearch(){
                this.list = [];
                
                this.$toast.loading({
                    duration:0,
                    forbidClick:true,
                    message:'查询中...'
                });
                
                let query = {
                    projectName:this.value
                }
                
                projectSearch(this.serialize(query)).then(res => {
                    this.list = res.entry.data || [];
                }).catch().then(() => {
                    this.$toast.clear();
                });
            }
        },
        watch:{
            value(){
                this.throttle(this.projectSearch);
            }
        },
        components:{
            [Search.name]:Search,
            [Popup.name]:Popup
        },
        mounted(){
            // 存储传递过来的工程名
            this.value = this.$route.query.projectName;
            // 加载一次项目
            this.projectSearch();
        }
    }
</script>

<style lang="less" scoped>
.md-list_wrap{
    width:100%;height:~'calc(100vh - 54px)';
    overflow:hidden;overflow-y:auto;
    background-color:#fff;color:#333;    
}
.md-list_item{
    border-bottom:1px solid #eee;
    font-size:16px;padding:.2rem .3rem;
}
</style>